<!--
- Author:  LiShibin.
- Date:    2017/8/4 0004.
- File:    order.
-->
<template>
  <div class="Web_Box nb">
    <div class="DistributionOrder">
      <!--全部Start-->
      <div class="ProList">
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="false"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false">
          <li v-for="order in orderList.data">
            <div class="tit"><span class="fl">订单号：{{order.order_info.order_sn}}</span>
              <span v-if="!order.order_info.if_lock" class="fr cr_595757">{{order.order_info.state_desc}}</span>
              <span v-else class="fr cr_595757">退款/退货订单</span>
            </div>
            <div v-for="goods in order.order_info.extend_order_goods">
              <div class="Pic"><img :src="$config.website + $config.goodsImgSrc + goods.goods_image" alt=""/></div>
              <div class="Con" style="width:11.5rem;">
                <div class="">
                  <h2 class="">{{goods.goods_name}}&nbsp;&nbsp;<span v-for="attr in goods.goods_spec">{{attr.name}} </span></h2>

                </div>
                <div class=" pt20"><span class="Prices">￥{{goods.goods_price}}</span> <span class="Num fr">×{{goods.goods_num}}</span></div>

              </div>
            </div>
            <div class="Operation">
              <div class="Deductible">在线支付:￥{{order.order_info.pay_amount || 0}}&nbsp;积分抵扣:￥{{parseInt(order.order_info.integral_amount || 0)}}&nbsp;余额支付:￥{{order.order_info.balance_amount || 0}}</div>
              <p class="Total tr">共{{countOrderGoodsNum(order)}}件商品&nbsp;&nbsp;合计:￥{{order.order_info.order_amount || 0}}&nbsp;(运费:￥{{order.order_info.shipping_fee || 0}})</p>
              <!--<div class=""><span class=" pt10 disib f22">快递订单</span></div>-->
            </div>
          </li>
        </ul>
        <loading-more :allLoaded="orderList.allLoaded" :show="orderList.data.length > 0"></loading-more>
      </div>
      <!--全部End-->
    </div>
    <empty-data :show="orderList.allLoaded && orderList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  //  import {MessageBox} from 'mint-ui'

  export default{
    data() {
      return {
        memberId: this.$route.params.id,
        orderList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getSubOrderList(this.orderList.page, this.orderList.pageSize)
    },
    methods: {
      countOrderGoodsNum(order) {
        let count = 0
        if (!order.order_info || !order.order_info.extend_order_goods) {
          return count
        }
        for (let i = 0; i < order.order_info.extend_order_goods.length; i++) {
          count += parseInt(order.order_info.extend_order_goods[i].goods_num)
        }
        return count
      },
      getSubOrderList(page, pageSize) {
        this.orderList.loading = true
        this.$request.getSubOrderList(this.memberId, page, pageSize, 0).then(data => {
          if (data.length < this.orderList.pageSize) {
            this.orderList.allLoaded = true
          }
          this.orderList.data = [...this.orderList.data, ...data]
        }).finally(() => {
          this.orderList.requested = true
          this.orderList.loading = false
        })
      },
      loadMore() {
        if (this.orderList.loading || this.orderList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getSubOrderList(++this.orderList.page, this.orderList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>